import {
  createRouter,
  createWebHashHistory,
  createWebHistory,
} from "vue-router";

const router = createRouter({
  // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
  history: createWebHistory(),
  routes: [
    {
      path: "/",
      redirect: "/home",
    },
    {
      path: "/home",
      component: () => import("../pages/home/Index.vue"),
      children: [
        {
          path: "/home",
          redirect: "/home/movies",
        },
        {
          path: "/home/movies",
          component: () => import("../pages/home/movies/Index.vue"),
          children: [
            {
              path: "/home/movies",
              redirect: "/home/movies/hot",
            },
            {
              path: "/home/movies/hot",
              component: () => import("../pages/home/movies/hot/Index.vue"),
            },
            {
              path: "/home/movies/cinema",
              component: () => import("../pages/home/movies/cinema/Index.vue"),
            },
            {
              path: "/home/movies/wait",
              component: () => import("../pages/home/movies/wait/Index.vue"),
            },
            {
              path: "/home/movies/classic",
              component: () => import("../pages/home/movies/classic/Index.vue"),
            },
          ],
        },
        {
          path: "/home/videos",
          component: () => import("../pages/home/videos/Index.vue"),
          meta: {
            title: "猫眼视频",
          },
        },
        {
          path: "/home/mini",
          component: () => import("../pages/home/mini/Index.vue"),
          meta: {
            title: "猫眼小电影",
          },
        },
        {
          path: "/home/show",
          component: () => import("../pages/home/show/Index.vue"),
          meta: {
            requireLogin: true,
            title: "猫眼演出",
          },
        },
        {
          path: "/home/mine",
          component: () => import("../pages/home/mine/Index.vue"),
          // 表示路由元信息
          // meta允许我们写任意的对象
          meta: {
            requireLogin: true,
            title: "我的猫眼",
          },
          // 路由独享守卫，只有当要进这个页面才会执行
          // 作用和全局前置守卫是一样的，它只能控制一个页面
          // beforeEnter: (to, from, next) => {
          //   if (localStorage.getItem("token")) {
          //     next();
          //   } else {
          //     next("/login");
          //   }
          // },
        },
      ],
    },
    {
      path: "/detail/:id",
      component: () => import("../pages/detail/Index.vue"),
    },
    {
      path: "/city",
      component: () => import("../pages/city/Index.vue"),
    },
    // {
    //   path: "/login",
    //   component: () => import("../pages/login/Index.vue"),
    // },
    {
      path: "/:pathMatch(.*)*",
      component: () => import("../pages/notFound/Index.vue"),
    },
  ],
  // 滚动行为
  scrollBehavior(to, from, savedPosition) {
    // return 期望滚动到哪个的位置
    // return { top: 0 };

    // 只能通过前进和后退来保存
    if (savedPosition) {
      return savedPosition;
    } else {
      return { top: 0 };
    }
  },
});

// 全局的前置守卫
// 只要有页面的跳转，就会触发这个全局的前置守卫
router.beforeEach((to, from, next) => {
  // to和from表示要去的那个页面和来的那个页面的路由信息
  // console.log("to", to);
  // console.log("from", from);
  // next()函数执行放行
  // next(false)表示不放行
  // next(路径)表示重定向

  // 路由鉴权
  if (to.meta.requireLogin) {
    if (localStorage.getItem("token")) {
      next();
    } else {
      // next(false);
      next("/login");
    }
  } else {
    next();
  }
});

// 全局解析守卫
// 语法和功能跟全局前置守卫完全一致
// 区别在于全局解析守卫的执行时机会比全局的前置守卫稍微后面一些
// router.beforeResolve((to, from, next) => {
//   next();
// });

// 全局后置钩子
// 执行时机是在页面跳转之后, 没有next参数的
router.afterEach((to, from) => {
  document.title = to.meta.title || "猫眼电影 娱乐看我的";
});

export default router;
